<template>
          <el-card class="box-card">
            <div class="main-layout">
                <el-container>
                  <el-aside width="300px">
                    <el-menu
                        class="user_message_side_bar"
                        active-text-color="#4C8ADA"
                        text-color="#000"
                        background-color="#ffffff"
                        @open="handlOpen"
                        @close="handleClose"
                    >
                      <el-menu-item v-for="i in chatUserList" :key="i" class="text item">{{i}}</el-menu-item>
                    </el-menu>
                  </el-aside>

                  <el-container>
                  <el-header height="60%" style="background-color: ghostwhite">
                    <div v-for="(key,val) in chatContent" :key="key">
                      <el-row>
                        <el-col :span="24" class="key">
                          <span>{{val}}</span>
                        </el-col>
                        <el-col :span="24" class="val">
                          <span>{{key}}</span>
                        </el-col>
                      </el-row>
                    </div>
                  </el-header>
                  <el-main height="40%" class="inputContainer">
                    <el-input
                        v-model="textarea"
                        :rows="5"
                        type="textarea"
                        placeholder="Please input"
                        class="inputArea"
                    />
                    <el-row justify="end" gutter="20px" align="bottom" style="padding-top: 10px">
                      <el-button>取消</el-button>
                      <el-button>发送</el-button>
                    </el-row>
                  </el-main>
                  </el-container>
                </el-container>
            </div>
          </el-card>
</template>

<script>
export default {
  name: "user-center-messageBox",
  components:{},
  data(){
    return {
      chatUserList:['username1','username2'],
      chatContent:{'username1':'mesgContent1','username2':'mesgContent2'},
      def:true
    }
  }
}
</script>

<style scoped>

.box-card {
  width: 900px;
  position: relative;
  margin-left: 80px;
  margin-top: 10px;
  height: 650px;
}
.user_message_side_bar{
  margin-bottom: 0;
}
.inputArea{
  margin-left: 0;
  margin-right: 0;
}
.inputContainer{
  padding-left: 0;
  padding-right: 0;
  padding-top: 20px;
}
.aside{
  border: 10px;
  border-color: black;
}
.key{
  position: relative;
  padding-left: 0;
  padding-top: 30px;
  color: darkgray;
  font-size: small;
}
.val{
  position: relative;
  padding-left: 0;
  padding-top: 10px;
}
</style>